<template>
	<view class="big-box">
		<scroll-view scroll-y="true">
			<view class="search" @click="searchClass">
				<view class="search-box">
					<image src="../../static/images/search.png" mode=""></image>
					<text>搜索</text>
				</view>
			</view>
			<view class="shuffling">
				<view class="wrap">
					<u-swiper :list="list" mode="round"  @click="goLiveDetail"></u-swiper>
				</view>
			</view>
			<view class="content">
				<boutiqueClass></boutiqueClass>
				<specialSubject></specialSubject>
				<free></free>
				<selected></selected>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getGet,
		getPost
	} from "../../api/index.js"
	import boutiqueClass from "../../components/boutiqueClass.vue"
	import specialSubject from "../../components/specialSubject.vue"
	import free from "../../components/free.vue"
	import selected from "../../components/selected.vue"
	export default {
		data() {
			return {
				keyword: '搜索',
				list: [],
				liveData: [],
			}
		},
		components: {
			boutiqueClass,
			specialSubject,
			free,
			selected
		},
		methods: {
			searchClass(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			goLiveDetail(e) {
				// console.log(e)
				uni.navigateTo({
					url: `/pages/detail/detail?id=${this.liveData[e]}`
				})
			}
		},
		onLoad() {
			getGet("/weChat/applet/course/banner/list?number=5").then(res => {
				res.data.data.forEach(item => {
					// console.log(item.imgUrl)
					// console.log(item.id)
					this.liveData.push(item.id)
					this.list.push({
						image: item.imgUrl
					})
				})
			})

		}
	}
</script>

<style lang="less" scoped>
	// .big-box{
	// 	height: 100vh;
	// }
	.search {
		width: 90%;
		margin: 0 auto 10rpx;
	}

	.content {
		padding: 0 20rpx;
	}
	.search-box{
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 5rpx;
		}
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
	}
</style>
